<template>
  <router-link class="flex justify-between text-[#e54c5f]" to="/exchange/order">
    <div class="flex items-center cursor-pointer">
      <el-icon>
        <ArrowLeftBold />
      </el-icon>
      <p class="pl-5">{{$t('订单详情')}}</p>
    </div>
  </router-link>
  <el-card class="my-5">
    <el-skeleton :rows="5" animated :loading="loading">
      <div class="w-1/2 mx-auto relative">
        <div class="flex justify-between my-5">
          <span>{{$t('订单状态')}}</span>
          <el-tag :type="
            form.status == 0
              ? 'warning'
              : form.status == 1
                ? 'success'
                : 'danger'
          ">{{ status[form.status] }}</el-tag>
        </div>
        <el-card size="large" class="my-5">
          <div class="flex">
            <div class="flex-1 px-5">{{ $t("卖出") }} </div>
            <div class="flex-1 px-5" align="right">{{ numberToCurrencyNo(form.from_amount) }} {{ form.from_currency }}</div>
          </div>
        </el-card>
        <div class="mb-4 text-right text-[#7F7F7F]">
          <span v-if="form.status == 0">{{$t('账户余额')}} {{ numberToCurrencyNo(form.balance) }} {{ form.balance_currency }}</span> &nbsp;
        </div>
        <div class="bg w-6 h-14"></div>
        <el-card size="large" class="my-5">
          <div class="flex">
            <div class="flex-1 px-5">{{ $t("买入") }}</div>
            <div class="flex-1 px-5" align="right">{{ numberToCurrencyNo(form.to_amount) }} {{ form.to_currency }}</div>
          </div>
        </el-card>
        <div class="flex justify-between mb-4">
          <span>{{$t('商户名称')}}</span>
          <span>{{ form.merchant_name }}</span>
        </div>
        <div class="flex justify-between mb-4">
          <span>{{$t('价格')}}</span>
          <span v-if="form.confirm == 1">
          <el-input v-model="form.price" size="large" style="width:300px">
            <template #prepend>1 {{ form.from_currency }} =</template>
            <template #append>{{ form.to_currency }}</template>
          </el-input>
          <el-button type="primary" size="large" class="mx-1" :icon="RefreshLeft" @click="resetPrice">重置价格</el-button>
          </span>
          <span v-else>1 {{ form.from_currency }} = {{ form.price }} {{ form.to_currency }}
          </span>
        </div>
        <div class="flex justify-between mb-4">
          <span>{{$t('平台手续费')}}({{ form.fee_ratio }}%)</span>
            <span>{{ numberToCurrencyNo(form.fee) }} {{ form.fee_currency }}</span>
        </div>

        <div class="flex justify-between mb-4">
          <span>{{$t('可获得金额')}}</span>
            <span>{{ numberToCurrencyNo(form.actual_amount) }} {{ form.fee_currency }}</span>
        </div>

        <div class="flex justify-between mb-4">
          <span>{{$t('提交时间')}}</span>
          <span>{{ formatDates(form.createtime) }}</span>
        </div>
        <div class="flex justify-between mb-4" v-if="form.finish_time > 0">
          <span>{{$t('完成时间')}}</span>
          <span>{{ formatDates(form.finish_time) }}</span>
        </div>
        <div class="flex justify-between mb-4">
          <span>{{$t('订单流水号')}}</span>
          <span>{{ form.order_no }}</span>
        </div>
        <div class="my-5 text-center">
          <span class="text-lg text-[#e54c5f]">{{ form.status_tips }}</span>
        </div>
      </div>
    </el-skeleton>
    <div class="w-1/2 mx-auto text-center">
      <el-button plain type="danger" :icon="Close" class="w-56 my-10 mx-5" size="large"
      v-btn="['all', 'web_exchange_order_records_cancel']"
      @click="onCancel" v-if="form.status == 0">{{$t('取消订单')}}</el-button>
      <el-button type="primary" :icon="Wallet" class="w-56 my-10 mx-5" size="large" @click="onSubmit" v-if="form.need_deposit == 1">
      {{$t('充值')}}</el-button>
      <el-button type="primary" :icon="SuccessFilled" class="w-56 my-10 mx-5" size="large" @click="onConfirm" v-if="form.confirm == 1">
      {{$t('确认交易')}}</el-button>
    </div>
  </el-card>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import {
  orderDetailApi,
  orderCancelApi,
  orderConfirmApi,
  resetPriceApi,
} from "@/api/exchange/index";
import { ElMessage } from "element-plus";
import { Close, SuccessFilled, Wallet, RefreshLeft } from '@element-plus/icons-vue'
import { formatDates, numberToCurrencyNo } from "@/utils/utils";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const { ...route } = useRoute();
const router = useRouter();
const loading = ref(false);
const disabled = ref(false);
const form = reactive({});
const status = reactive({
  0: t('进行中'),
  1: t('已完成'),
  2: t('已取消'),
});
onMounted(() => {
  if (route.query.order_no) {
    getData(route.query.order_no);
  }
});
//取消订单
const resetPrice = async () => {
  try {
    const res = await resetPriceApi({ order_no: form.order_no, price: form.price });
    ElMessage({
      message: t("价格设置成功"),
      type: "success",
    });
    getData(route.query.order_no);
  } catch (error) {
    return false;
  }
};
//取消订单
const onCancel = async () => {
  try {
    const res = await orderCancelApi({ order_no: form.order_no });
    ElMessage({
      message: t("取消订单成功"),
      type: "success",
    });
    getData(route.query.order_no);
  } catch (error) {
    return false;
  }
};
// 订单确认
const onConfirm = async () => {
  try {
    const res = await orderConfirmApi({ order_no: form.order_no });
    ElMessage({
      message: t("订单确认"),
      type: "success",
    });
    getData(route.query.order_no);
  } catch (error) {
    return false;
  }
};
// 充值
const onSubmit = () => {
  router.replace(`/account/recharge`);
};
const getData = async (order_no) => {
  loading.value = true;
  try {
    const res = await orderDetailApi({ order_no: order_no });
    // console.log(res);
    Object.assign(form, res);
    loading.value = false;
    disabled.value = false;
  } catch (error) {
    // console.log(error);
    loading.value = false;
    disabled.value = true;
  }
};
</script>

<style scoped>
.bg {
  background: url("../../../../assets/images/button-icon.svg") center center no-repeat;
  position: absolute;
  left: 50%;
  top: 7.2rem;
}
</style>
